<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
    }
    .content{
        width: 200px;/*确保与每个页面大小一致*/
        height: 400px;
        position: relative;/*必须子绝父相*/
        overflow: hidden;
        background-color: #1E9FFF;
    }
    .wrapper{
        width: 600px;/*确保是n个页面宽度的n倍*/
        height: 300px;/*确保与页面高度相同*/
        background-color: red;
        display: flex;
        position: absolute;
    }
    .wrapper div{
        width: 200px;/*页面宽度*/
        height: 300px;/*页面高度*/
        flex-shrink: 0;/*禁止压缩宽度*/
        border: #004b00 1px solid;
        font-size: 50px;
        text-align: center;
    }
    .wrapper div:nth-child(2n)
    {
        background-color: #c592ff;
    }
</style>
<body>
<div class="content">
<div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
</div>
</body>
<!--左右滑动翻页-->
<script>
    let box = document.querySelector(".content") // 监听对象
    let startDistanceX = '' // 触摸开始X轴位置
    let wrapper=document.querySelector(".wrapper")
    //初始化容器位置
    let BASE_WOSL=wrapper.offsetLeft

    box.addEventListener("touchstart", (e) => {
        startDistanceX = e.touches[0].screenX
    })
    //按住ctrl,鼠标点击addEventListener()查看源码，里面的interface GlobalEventHandlersEventMap有包含多少事件
    box.addEventListener("touchmove",function (e) {
        let x=e.changedTouches[0].screenX
        let b=x-startDistanceX//相对位移
        wrapper.style.left= BASE_WOSL+b+"px"
    })
    box.addEventListener("touchend", (e) => {
        //更新容器距离
        BASE_WOSL=wrapper.offsetLeft
    })
</script>
</html>